import {loadFBX} from '../utils/index'
import {SurroundLine} from '../effect/surroundLine'
import { Background } from "../effect/background"
import { Radar } from '../effect/radar'
import { Wall } from '../effect/wall'
import { Circle } from '../effect/circle'
import { Ball } from '../effect/ball'
import { Cone } from '../effect/cone'
import { Fly } from '../effect/fly'
import { Road } from '../effect/road'
import { Font } from '../effect/font'
import { Snow } from '../effect/snow'
import { Rain } from '../effect/rain'
import { Smoke } from '../effect/smoke'
import * as TWEEN from '@tweenjs/tween.js'
import * as THREE from 'three'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'

export class City {
  constructor(scene,camera,controls){
    this.scene = scene
    this.camera = camera
    this.controls = controls;
    this.tweenPosition =null
    this.tweenRotation=null
    this.height = {
      value:5
    }
    this.time = {
      value:0
    }
    this.top = {
      value:0
    }
    this.flag = false

    this.effect = {}
    this.loadCity()
  }
  loadCity(){


    // 加载模型并渲染到画布
    loadFBX('beijing.fbx').then(object=>{
      // this.scene.add(object)
      console.log(object);
      object.traverse((child)=>{
        if(child.isMesh){
          new SurroundLine(this.scene,child,this.height,this.time)
        }
      })
      this.initEffect()
    })
  }
  initEffect(){
    // 起始点
    const source1={x:683,y:0,z:-73}
    // 终止点
    const target1={x:180.69700665687557,y:0,z:-110}
      // 起始点
    const source2={x:344,y:0,z:267}

    new Background(this.scene)
    new Radar(this.scene,this.time)
    new Wall(this.scene,this.time)
    new Circle(this.scene,this.time)
    new Ball(this.scene,this.time)
    new Fly(this.scene,this.time,source1,target1)
    new Fly(this.scene,this.time,source2,target1)
    new Road(this.scene,this.time)
    new Cone(this.scene,this.top,this.height)
    new Font(this.scene)
    this.effect.snow =  new Snow(this.scene)
    // this.effect.rain = new Rain(this.scene)
    const options = {
      position:{
        x:-50,
        y:100,
        z:400
      }
    }
    this.effect.smoke = new Smoke(this.scene,options)
    this.addClick()

    this.addWheel()
  }
  // 让场景跟随鼠标的坐标进行缩放
  addWheel() {
    const body = document.body;
    body.onmousewheel = (event) => {
      const value = 30;

      // 鼠标当前的坐标信息
      const x = (event.clientX / window.innerWidth) * 2 - 1;
      const y = -(event.clientY / window.innerHeight) * 2 + 1;

      const vector = new THREE.Vector3(x, y, 0.5);

      vector.unproject(this.camera)
      vector.sub(this.camera.position).normalize()

      if (event.wheelDelta > 0) {
        this.camera.position.x += vector.x * value;
        this.camera.position.y += vector.y * value;
        this.camera.position.z += vector.z * value;

        this.controls.target.x += vector.x * value;
        this.controls.target.y += vector.y * value;
        this.controls.target.z += vector.z * value;
      } else {
        this.camera.position.x -= vector.x * value;
        this.camera.position.y -= vector.y * value;
        this.camera.position.z -= vector.z * value;

        this.controls.target.x -= vector.x * value;
        this.controls.target.y -= vector.y * value;
        this.controls.target.z -= vector.z * value;
      }
    }
  }
  addClick(){
    let flag = true
    document.onmousedown = ()=>{
      flag = true
      document.onmousemove = () => {
        flag = false
      }
    }
    document.onmouseup=(e)=>{
      if(flag){
        this.clickEvent(e)
      }
      document.onmousemove = null
    }
  }
  clickEvent(e){
// 点击事件
 // 获取浏览器坐标
 const x = (e.clientX / window.innerWidth) * 2 -1
 const y = -(e.clientY / window.innerHeight) * 2 +1
 // 创建三维浏览器坐标
 const standardVector = new THREE.Vector3(x,y,0.5)
 // 转换为世界坐标
 const worldVector = standardVector.unproject(this.camera)
 // 做序列化
 const ray = worldVector.sub(this.camera.position).normalize()
 // 实现点击选中
 // 创建射线发射器 
 const raycaster = new THREE.Raycaster(this.camera.position,ray)
 // 返回射线碰撞到的物体
 const intersects = raycaster.intersectObjects(this.scene.children,true)
 let point3d = null
 if (intersects.length) {
   point3d = intersects[0]
 }
 if (point3d) {
   const proportion = 3
   console.log(point3d);
   // 开始动画修改观察点
   const time = 2000
   this.tweenPosition = new TWEEN.Tween(this.camera.position).to({
     x:point3d.point.x * proportion,
     y:point3d.point.y* proportion,
     z:point3d.point.z* proportion,
   },time).start()
   this.tweenRotation = new TWEEN.Tween(this.camera.rotation).to({
     x:this.camera.rotation.x,
     y:this.camera.rotation.y,
     z:this.camera.rotation.z,
   },time).start()
 }
  }
  start(delta){
    for (const key in this.effect) {
      this.effect[key] && this.effect[key].animation()
    }
    if(this.tweenPosition && this.tweenRotation){
      this.tweenPosition.update()
      this.tweenRotation.update()
    }
    this.height.value += 0.4
    if(this.height.value > 160){
    this.height.value = 5 

    } 
    this.time.value += delta
    if (this.top.value > 15 || this.top.value < 0) {
      this.flag = !this.flag
    }
    this.top.value+=this.flag? -0.8:0.8

  }
}
